import { FormInstance, Modal } from 'antd';

import { useRef } from 'react';
import styles from '../style.less';
import { SystemConfigItem } from '../types';
import ProForm, { ProFormText } from '@ant-design/pro-form';

interface EditFormProps {
  // 规则的唯一id
  config: SystemConfigItem;
  // 请求修改数据的回调
  onSubmit: (values: SystemConfigItem) => Promise<void>;
  // 取消窗口的回调
  onCancel: (flag?: boolean) => void;
  // 窗口是否可见
  modalVisible: boolean;
}

export default (props: EditFormProps) => {
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    modalVisible: updateModalVisible,
    config
  } = props;
  const formRef = useRef<FormInstance>();

  return (
    <Modal
      title="更新配置"
      open={updateModalVisible}
      width={550}
      footer={null}
      centered
      onCancel={() => handleUpdateModalVisible(false)}
      afterClose={() => handleUpdateModalVisible(false)}
    >
      <ProForm<SystemConfigItem>
        onFinish={(values) => handleUpdate(values)}
        formRef={formRef}
        className={styles.stepsAction}
        layout="vertical"
      >
        <ProFormText
          width={'xl'}
          name="id"
          label="配置id"
          initialValue={config.id}
          hidden={true}
        />

        <ProFormText
          width={'xl'}
          name="believe_degree"
          label="置信度"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入置信度' }]}
          initialValue={config?.believe_degree}
        />

        <ProFormText
          width={'xl'}
          name="fail_repush"
          label="失败重推"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入失败重推配置' }]}
          initialValue={config?.fail_repush}
        />

        <ProFormText
          width={'xl'}
          name="tenant_id"
          label="客户id"
          initialValue={config.tenant_id}
          hidden={true}
        />

      </ProForm>
    </Modal>
  );
};

